<template>
	<view class="previewImages" v-if="show">
		<div class="cancel" @click="onCancel">
			<icon type="cancel" size="40" color="#fff" />
		</div>
		<div class="mask" @click="onCancel"></div>
		<swiper class="swiper-box" 
			:indicator-dots="true" 
			indicator-color="rgba(255, 255, 255, .3)"
			indicator-active-color="#fff"
			:current="imgIndex"
		>
			<swiper-item class="swiper-item" v-for="(item,index) in imgUrls" :key="index">
				<image :src="item" mode="aspectFit"></image>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	export default {
		name:"previewImage",
		props:{
			imgUrls:{
				type:Array,
				default(){
					return []
				}
			},
			imgIndex:{
				type:Number,
				default:0,
			},
			show:{
				type:Boolean,
				default:false,
			},
		},
		data() {
			return {
				
			};
		},
		watch:{
			show(){
				// console.log('imgUrls',this.imgUrls)
			}
		},
		methods:{
			onCancel(){
				this.$emit('update:show',false)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.previewImages{
		position:fixed;
		top:0;
		left:0;
		z-index:9999;
		width:100%;
		height:100vh;
		display:flex;
		align-items:center;
		touch-action: none;
		.mask{
			background:rgba(0,0,0,.8);
			position:absolute;
			right:0;
			top:0;
			width:100%;
			height:100%;
			z-index: 1;
		}
		.cancel{
			position:absolute;
			right:30rpx;
			top:20%;
			z-index: 3;
		}
		.swiper-box{
			width:100%;
			height:80%;
			z-index: 2;
			position:relative;
			.swiper-item{
				wdith:100%;
				height:100%;
				display:flex;
				align-items:center;
				image{
					width:100%;
					height:100%;
				}
			}
		}
	}
</style>